<template>
  <view class="section">
    <view class="input">
      <u-input
        type="text"
        placeholder="此处默写单词"
        placeholder-style="font-size:36rpx;color: #929292;"
        v-model="wordValue"
      />
    </view>
    <view class="submit" @click="submit()">
      <text>确定</text>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import { saveWordLearningRecord } from "@/api/sync";
export default {
  components: {},
  props: {
    wordData: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      wordValue: "",
    };
  },
  mounted() {},
  methods: {
    submit() {
      if (!this.wordValue) {
        this.$refs.uToast.show({
          title: "请输入单词！",
          type: "warning",
        });
        return;
      }
      let flag = this.wordValue === this.wordData.word;
      if (flag) {
        this.$refs.uToast.show({
          title: "恭喜你，回答正确",
          type: "success",
        });
        this.$playBgAudio("correct");
        this.$emit("submit", true);
      } else {
        this.$refs.uToast.show({
          title: "回答错误",
          type: "error",
        });
        this.$playBgAudio("error");
      }
      this.saveRecord(flag);
    },
    saveRecord(flag) {
      let params = {
        pass: flag ? 1 : 0,
        step: "4",
        type: "dclx",
        wordId: this.wordData.id,
      };
      saveWordLearningRecord(params);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./WordStep4";
</style>
